<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="家庭作业" />
    <!-- 4个选择 -->
    <div class="center">
      <h1 class="title">家庭作业XXX</h1>
      <div class="mid">
        <div class="mid-item">
          <span>难度</span>
          <div class="right">
            <img src="@/assets/login_images/star-line.png" alt="">
            <img src="@/assets/login_images/star-line.png" alt="">
            <img src="@/assets/login_images/star-line.png" alt="">
          </div>
        </div>
        <div class="mid-item">
          <span>难度</span>
          <div class="right">25分钟</div>
        </div>
        <div class="mid-item">
          <span>人群</span>
          <div class="right">6-8岁</div>
        </div>
        <div class="mid-item">
          <span>目的</span>
          <div class="right">這是一个目的</div>
        </div>

      </div>
      <div class="bot">
        <span>难度</span>
        <div class="right">這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，
          這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，這是一段描述，
          這是一段描述，，，
        </div>
      </div>

      <div class="bot">
        <span style="visibility: hidden;">&nbsp;&nbsp;. </span>
        <!-- <el-input
          v-model="textarea2"
          class="right"
          type="textarea"
          placeholder="请输入内容"
        /> -->
        <div class="video">
          <iframe
            src="//player.bilibili.com/player.html?aid=67574132&bvid=BV1uJ411N7Qa&cid=117157383&page=1"
            width="100%"
            height="600px"
            scrolling="no"
            border="0"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
          />
        </div>
      </div>
      <!-- btn -->
      <div class="btn-body">
        <el-button class="btn" @click="go_to_select">返 回 </el-button>
        <el-button type="success" class="btn">布置作业</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import NewHeader from '@/components/NewHeader.vue'
export default {
  name: 'WorkDetail',
  components: {
    NewHeader
  },
  data() {
    return {
      active_class: 1,
      currentPage: 1,
      size: 10,
      total: 100,
      textarea2: ''
    }
  },
  mounted() {

  },
  methods: {
    go_to_select() {
      this.$router.push({ path: '/work/work-select/' })
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-body{
  width: fit-content;
  margin: 20px auto;
  .btn{
    margin: 0 20px;
  }
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }

  }

}
.CustomerList{
  position: relative;
  padding: 25px;

  .center{
    padding: 25px;
    background-color: white;
    .title{
      font-size: 20px;
      font-weight: bold;
    }
    .mid{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .mid-item{
        margin-bottom: 20px;
        margin-right: 100px;
        overflow: hidden;
        font-weight: bold;
        span{
          float: left;
          font-size: 14px;
          margin-right: 50px;
        }
        .right{
          float: left;
          color: #1890FF;
          font-size: 14px;
          overflow: hidden;
          img{
            float: left;
            margin-right: 5px;
            display: block;
            width: 19px;
            height: 19px;
            // background-color: black;
          }
        }
      }
    }
    .bot{
      margin-bottom: 20px;
      overflow: hidden;
      span{
        float: left;
        font-size: 14px;
        margin-right: 50px;
        width: 28px;
      }
      .right{
        width: calc(100% - 28px - 50px);
        float: left;
        color: #000000;
        font-size: 14px;
        overflow: hidden;
        ::v-deep textarea{
          height: 300px;
        }
      }
    }
  }
}

</style>
